import React from 'react'
import { withRouter } from 'react-router-dom'
import { PlayListCon } from '../http'
import $ from 'jquery'


// import '../assets/js/playList'
import '../assets/css/playList.css'

class PlayList extends React.Component {
    constructor() {
        super();
        this.state = {
            id: '',
            // 歌单
            playlist: [],
            privileges: [],
            // 创造者
            creator: [],
            tracks: []
        }
        this.title_box_bg = React.createRef();
    }
    render() {
        return <div id='PlayListCom' className='animate__animated'>
            <header className='header'>
                <div className='hd_left'>
                    <span className='iconfont icon-jiantoufanhui' onClick={()=>{this.props.history.go(-1)}}></span>
                    <span className='pl_title'>歌单</span>
                </div>
                <div className='hd_right'></div>
            </header>
            {/* 头部 */}
            <div className='title_box'>
                {/* 背景 */}
                <div className='title_box_mask'></div>
                <div ref={this.title_box_bg} className='title_box_bg'></div>
                {/* 歌单封面 */}
                <div className='title_con'>
                    {/* 歌单封面 */}
                    <div className='img_box'>
                        <img src={this.state.playlist.coverImgUrl} />
                    </div>
                    {/* 歌单信息 */}
                    <div className='pl_info'>
                        {/* 歌单名 */}
                        <p className='pl_name'>{this.state.playlist.name}</p>
                        {/* 创建者信息 */}
                        <p className='pl_cinfo'>
                            <img className='c_avatar' src={this.state.creator.avatarUrl} />
                            <span className='c_nkname'>{this.state.creator.nickname}</span>
                        </p>
                        {/* 歌单描述 */}
                        <div className='pl_des'>
                            <p className='pl_des_text'>{this.state.playlist.description}</p>
                        </div>
                    </div>
                </div>
            </div>
            {/* 歌单列表 */}
            <div className='music_list_box'>
                <div className='ml_header'>
                    <span className='iconfont icon-bofang'></span> 
                    <span className='mlh_title'>播放全部</span>
                    <span className='m_count'>(共{this.state.tracks.length}首)</span>
                    <button className='add_comment'><span className='addIcon'>+</span>收藏({this.state.playlist.commentCount})</button>
                </div>
                <ul className='ml_ul'>
                    {
                        this.state.tracks.map((item, index) => {
                            return (
                                <li key={item.id} className='songListItem'>
                                    <div className='itemCon'>
                                        <span className='m_sort'>{index + 1}</span>
                                        <span className='songInfo'>
                                            <p className='songName'>{item.name}</p>
                                            <p className='artists'>
                                                {
                                                    item.ar.map(artItem => {
                                                        return <span key={artItem.id}>{artItem.name}</span>
                                                    })
                                                }
                                                -&nbsp;
                                                {
                                                    item.al.name
                                                }
                                            </p>
                                        </span>
                                        <div className='m_play'>
                                            <span className='iconfont icon-bofang'></span>
                                        </div>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    }
    componentDidMount() {
        var id = this.props.match.params.id;
        this.setState({
            id: id
        });
        PlayListCon.getPlayListDetail(id, res => {
            console.log(res.data.playlist)
            this.setState({
                playlist: res.data.playlist,
                privileges: res.data.privileges,
                creator: res.data.playlist.creator,
                tracks: res.data.playlist.tracks
            }, () => {
                this.title_box_bg.current.style.backgroundImage = 'url("' + this.state.playlist.coverImgUrl + '")'
            });
        })
        // dom操作
        this.$(document).scroll((e)=> {
                this.$('#PlayListCom').removeClass('animate__slideInUp');
                // 顶部导航
                var $header = $('#PlayListCom .header');
                // 歌单列表
                var $ml_box = $('#PlayListCom .music_list_box'); 


                let hd_height = $header.height();
                let s_top = $(document).scrollTop();
                let mlb_t = $ml_box.offset().top;
                $ml_box.height($(window).height() - hd_height * 2)
                if (mlb_t - hd_height * 2 <= s_top) {
                    $ml_box.addClass('suckTop');
                } else {
                    $ml_box.removeClass('suckTop');
                }
                if(s_top >= hd_height){
                    $header.find('.pl_title').text(this.state.playlist.name)
                }else{
                    $header.find('.pl_title').text('歌单')
                }
                $('#PlayListCom .title_con').css('opacity', (mlb_t - hd_height - s_top) / (mlb_t - hd_height));
        });
        this.$('#PlayListCom').addClass('animate__slideInUp');
    }
    componentWillUnmount(){
        this.$(document).unbind()
    }
}

export default withRouter(PlayList)